<template>
  <el-dialog
    :model-value="dialog"
    title="将执行复制操作所复制的内容"
    align-center
    draggable
    width="60%"
    style="border-radius: 10px; padding: 5px 10px"
  >
    <div>{{ month - 1 }}月地区系数</div>
    <el-table
      :data="ScoreRuleList"
      height="450"
      style="
        width: 95%;
        margin: 5px auto;
        border-radius: 8px;
        box-shadow: 0px 5px 5px #b1b3b8;
      "
      :header-cell-style="{
        textAlign: 'center',
      }"
      :cell-style="{ textAlign: 'center' }"
    >
      <el-table-column prop="region" label="地区" > </el-table-column>
    <el-table-column prop="coefficient" label="地区系数" />
    </el-table>
    <div class="button">
      <el-button style="width: 180px" type="primary" @click="submitForm"
        >确认复制</el-button
      >
      <el-button style="width: 180px" @click="onClose">取消</el-button>
    </div>
  </el-dialog>
</template>
<script setup>
import {
  ref,
  onBeforeMount,
  reactive,
  defineProps,
  defineEmits,
  watch,
} from "vue";
import { getRegionCoefficientList } from "@/api/preview";
import { copy } from "@/api/regionCoefficient";
import { ElMessage } from "element-plus";

const dialog = ref(true);
const props = defineProps({
  dialog: {
    type: Boolean,
    required: true,
  },
  update: {
    type: Function,
    default: () => {},
  },
  close: {
    type: Function,
    default: () => {},
  },
});

const ScoreRuleList = ref([]);
const month = new Date().getMonth();
onBeforeMount(() => {
  getRegionCoefficientList().then((data) => {
    ScoreRuleList.value = data.data;
  });
});
watch(props, (newValue, oldValue) => {}, { deep: true });

const submitForm = () => {
  copy().then((data) => {
    if (data.code == 200) {
      ElMessage({
        message: "复制成功",
        type: "success",
      });
      props.update();
      props.close();
    } else {
      ElMessage.error("复制失败");
    }
  });
};

const onClose = () => {
  props.close();
};
</script>
<style lang="scss" scoped >
::v-deep .el-form-item__label:before {
  content: "* ";
  color: red;
}
.ins {
  ::v-deep .el-form-item__label:before {
    content: " ";
  }
}
.button {
  margin: 20px 50px;
  display: flex;
  justify-content: center;
}
</style>
